<template>
    <view class="page">
        <div class="header">
            <div class="designer-user">
                <img
                    class="designer-avatar"
                    src="https://via.placeholder.com/60x60?text=Logo"
                    alt="店铺logo"
                />
                <div class="user-profile">
                    <h1 class="name">睿智设计</h1>
                </div>
                <button class="like-btn accent-black">已关注</button>
                <button class="like-btn">+ 关注</button>
            </div>
            <p class="profile">
                Ta未设置个人介绍....Ta未设置个人介绍....Ta未设置个人介绍....Ta未设置个人介绍....Ta未设置个人介绍....Ta未设置个人介绍....Ta未设置个人介绍....Ta未设置个人介绍....
            </p>

            <div class="num-tabs">
                <div class="num-tab">
                    <div class="num-count">120</div>
                    <div class="num-label">销售量</div>
                </div>
                <div class="num-tab">
                    <div class="num-count">120</div>
                    <div class="num-label">销售量</div>
                </div>
                <div class="num-tab">
                    <div class="num-count">120</div>
                    <div class="num-label">销售量</div>
                </div>
                <div class="num-tab">
                    <div class="num-count">120</div>
                    <div class="num-label">销售量</div>
                </div>
            </div>
        </div>

        <div class="nav-ul">
            <wd-drop-menu style="flex: 1; min-width: 0">
                <wd-drop-menu-item
                    v-model="value1"
                    :options="option"
                    @change="handleChange1"
                />
            </wd-drop-menu>
            <view class="like-filter"> 喜欢 </view>
        </div>

        <div class="good-list">
<!--            <template v-for="item in [1, 2, 3, 4, 5, 6]">-->
<!--                <GoodItem></GoodItem>-->
<!--            </template>-->
        </div>
      <un-data class="un-data-content"></un-data>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import GoodItem from '@/components/good/GoodItem.vue';
import UnData from "@/components/un-data/UnData.vue";
const value1 = ref(0);
const value2 = ref(null);
const option = ref<Record<string, any>[]>([
    { label: '全部商品', value: 0 },
    { label: '新款商品', value: 1 },
    { label: '活动商品', value: 2 },
]);
</script>

<style scoped lang="scss">
.page {
    background: #f3f7f8;
    min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
    padding: 32rpx 32px 0;
    background: #ffffff;
}
.designer-user {
    display: flex;
    align-items: center;
    height: 128rpx;
    .designer-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 58rpx 58rpx 58rpx 58rpx;
    }
    .user-profile {
        margin: 0 20px;
        .name {
            height: 38rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #222222;
            line-height: 38rpx;
        }
        .profile {
            height: 28rpx;
            font-weight: 400;
            font-size: 20rpx;
            color: #6f6f6f;
            line-height: 28rpx;
            margin: 4px 0 0;
        }
    }
    .like-btn {
        width: 108rpx;
        height: 48rpx;
        background: #ffffff;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #f25a27;
        font-weight: 400;
        font-size: 28rpx;
        color: #f25a27;
        text-align: center;
        line-height: 48rpx;
        padding: 0;
        .active {
            border: 2rpx solid #b7b7b7;
            color: #b7b7b7;
        }
    }
}

.profile {
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;
    line-height: 38rpx;
    text-align: left;
}
.num-tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 128rpx;
    .num-tab {
        .num-count {
            font-weight: bold;
            font-size: 32rpx;
            color: #222222;
            line-height: 42rpx;
            text-align: center;
        }
        .num-label {
            height: 32rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #222222;
            line-height: 32rpx;
            text-align: center;
        }
    }
}

.nav-ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 2rpx solid #f2f2f2;
    background: #ffffff;
    .like-filter {
        height: 84rpx;
        line-height: 84rpx;
        text-align: center;
    }
}

.good-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16rpx;
    margin: 16rpx;
}

.un-data-content {
  display: flex;
  flex: 1;
  margin-top: 260rpx;
}
</style>
